<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航页面</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="header">
        <div class="container">
            <h1 class="logo">网站导航</h1>
            <div class="search-container">
                <input type="text" id="searchInput" placeholder="搜索网站..." class="search-input">
                <button id="searchButton" class="search-button">搜索</button>
            </div>
        </div>
    </header>

    <main class="main">
        <div class="container">
            <div class="category-tabs" id="categoryTabs">
                <!-- 分类标签将通过JS动态生成 -->
            </div>

            <div class="bookmarks-container" id="bookmarksContainer">
                <!-- 书签内容将通过JS动态生成 -->
            </div>

            <div class="add-bookmark-section">
                <h3>添加新书签</h3>
                <form id="addBookmarkForm">
                    <div class="form-group">
                        <label for="siteName">网站名称</label>
                        <input type="text" id="siteName" required placeholder="请输入网站名称">
                    </div>
                    <div class="form-group">
                        <label for="siteUrl">网站URL</label>
                        <input type="url" id="siteUrl" required placeholder="请输入网站URL">
                    </div>
                    <div class="form-group">
                        <label for="siteCategory">分类</label>
                        <input type="text" id="siteCategory" required placeholder="请输入分类名称">
                    </div>
                    <button type="submit" class="add-button">添加</button>
                </form>
            </div>
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            <p>© 2024 网站导航 | 所有数据存储在本地浏览器中</p>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>